<template>
	<div class="home" ref="home">
		<div ref="topfind">
			<el-row :gutter="20" style="display: flex;" class="topfind">
				<el-col style="flex:1;"></el-col>
				<el-col style="width: 1440px;">
					<div class="title_name_box">
						<div class="title_name">
							<span>智慧后勤用电管理与服务模块</span>
						</div>
					</div>
				</el-col>
				<el-col style="flex:1;"></el-col>
			</el-row>
		</div>
		<el-row :gutter="20" style="display: flex;margin: 0;" :style="'height:calc(100% - ' + endHeight + 'px);'">
			<el-col style="flex:1;position: relative;padding: 0;">
				<div class="left_name">
					<div class="left_name_block">
						<el-row :gutter="20" style="margin: 0;height: 100%;">
							<el-col style="height: 31.5%;" class="mb15">
								<el-row :gutter="10" class="el-rowheadbox">
									<el-col :span="12" class="el-headbox mr15">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>昨日售电次数</span>
										</div>
										<div class="isecharts_conter">
											<div class="isecharts_conter_left">
												<div>{{ zt_count + pt_count }}次</div>
											</div>
											<div class="isecharts_conter_right">
												<div
													style="display: flex;align-items: center;width: 100%;margin-bottom: 10px;">
													<img src="../assets/images/03.png" alt="" srcset=""
														style="width: 39px;height: 39px;">
													<span style="margin: 0 20px;">i北理售电</span>
													<span style="color: #0bc353;font-weight: bold;">{{ zt_count }}次</span>
												</div>
												<div style="display: flex;align-items: center;width: 100%;">
													<img src="../assets/images/04.png" alt="" srcset=""
														style="width: 39px;height: 39px;">
													<span style="margin: 0 20px;">平台售电</span>
													<span style="color: #11d9d0;font-weight: bold;">{{ pt_count }}次</span>
												</div>
											</div>
										</div>
									</el-col>
									<el-col :span="12" class="el-headbox">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>时间段充值</span>
										</div>
										<div class="echarts_conter">
											<div id="main1" style="width: 100%;height: calc(100% - 0px);"
												v-on-echart-resize></div>
										</div>
									</el-col>
								</el-row>
							</el-col>
							<el-col style="height: 31.5%;" class="mb15">
								<el-row :gutter="10" class="el-rowheadbox">
									<el-col :span="12" class="el-headbox mr15">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>良乡科研楼一周用电最多楼宇</span>
										</div>
										<div class="echarts_conter">
											<div id="main2" style="width: 100%;height: calc(100% - 24px);"
												v-on-echart-resize></div>
										</div>
									</el-col>
									<el-col :span="12" class="el-headbox">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>良乡科研楼一周用电最多楼宇对比</span>
										</div>
										<div class="echarts_conter">
											<div id="main3" style="width: 100%;height: calc(100% - 0px);"
												v-on-echart-resize></div>
										</div>
									</el-col>
								</el-row>
							</el-col>
							<el-col style="height: 31.5%;" class="mb15">
								<el-row :gutter="10" class="el-rowheadbox">
									<el-col :span="12" class="el-headbox mr15">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>中关村学生公寓一周用电最多楼宇</span>
										</div>
										<div class="echarts_conter">
											<div id="main4" style="width: 100%;height: calc(100% - 24px);"
												v-on-echart-resize></div>
										</div>
									</el-col>
									<el-col :span="12" class="el-headbox">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>中关村学生公寓一周用电最多楼宇对比</span>
										</div>
										<div class="echarts_conter">
											<div id="main5" style="width: 100%;height: calc(100% - 0px);"
												v-on-echart-resize></div>
										</div>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
			<el-col style="width: 1240px;" class="cover_name">
				<el-image style="width: 1189px;height: 568px;" :src="require('../assets/images/09.png')"
					fit="contain"></el-image>
				<div class="item_data item_data_lefts">
					<span class="span_deta">{{ cz_count }}次</span>
					<span class="span_name_data">售电总数</span>
				</div>
				<div class="item_data item_data_leftx">
					<span class="span_deta">{{ zgc_count }}栋</span>
					<span class="span_name_data">中关村对接楼宇</span>
				</div>
				<div class="item_data item_data_rights">
					<span class="span_deta">{{ ele_count }}只</span>
					<span class="span_name_data">电表数量</span>
				</div>
				<div class="item_data item_data_rightx">
					<span class="span_deta">{{ lx_count }}栋</span>
					<span class="span_name_data">良乡对接楼宇</span>
				</div>
			</el-col>
			<el-col style="flex:1;position: relative;padding: 0;">
				<div class="right_name">
					<div class="left_name_block">
						<el-row :gutter="20" style="margin: 0;height: 100%;">
							<el-col style="height: 20.5%;" class="mb15">
								<el-row :gutter="10" class="el-rowheadbox">
									<el-col :span="12" class="el-headbox">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>良乡科研楼累计用电</span>
										</div>
										<div class="isecharts_conter1">
											<div>
												<img src="../assets/images/07.png" alt="" srcset=""
													style="width: 98px;height: 79px;">
												<div
													style="display: flex;flex-direction: column;justify-content: center;margin-left: 10px;">
													<span style="font-size: 18px;color: #99d2ff;margin-bottom: 4px;font-weight: bold;">本 周</span>
													<span style="font-size: 20px;color: #44c67c;">{{ lxWeek }} kwh</span>
												</div>
											</div>
											<div>
												<img src="../assets/images/07.png" alt="" srcset=""
													style="width: 98px;height: 79px;">
												<div
													style="display: flex;flex-direction: column;justify-content: center;margin-left: 10px;">
													<span style="font-size: 18px;color: #99d2ff;margin-bottom: 4px;font-weight: bold;">本 月</span>
													<span style="font-size: 20px;color: #27cfe8;">{{ lxMonth }} kwh</span>
												</div>
											</div>
										</div>
									</el-col>
									<el-col :span="12" class="el-headbox">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>中关村学生公寓累计用电</span>
										</div>
										<div class="isecharts_conter1">
											<div>
												<img src="../assets/images/07.png" alt="" srcset=""
													style="width: 98px;height: 79px;">
												<div
													style="display: flex;flex-direction: column;justify-content: center;margin-left: 10px;">
													<span style="font-size: 18px;color: #99d2ff;margin-bottom: 4px;font-weight: bold;">本 周</span>
													<span style="font-size: 20px;color: #44c67c;">{{ zgcWeek }} kwh</span>
												</div>
											</div>
											<div>
												<img src="../assets/images/07.png" alt="" srcset=""
													style="width: 98px;height: 79px;">
												<div
													style="display: flex;flex-direction: column;justify-content: center;margin-left: 10px;">
													<span style="font-size: 18px;color: #99d2ff;margin-bottom: 4px;font-weight: bold;">本 月</span>
													<span style="font-size: 20px;color: #27cfe8;">{{ zgcMonth }} kwh</span>
												</div>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-col>
							<el-col style="height: 35%;" class="mb15">
								<el-row :gutter="10" class="el-rowheadbox">
									<el-col :span="12" class="el-headbox mr15">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>良乡一周用电量小于1度房间数占比</span>
										</div>
										<div class="echarts_conter">
											<div id="main6" style="width: 100%;height: calc(100% - 0px);"
												v-on-echart-resize>
											</div>
										</div>
									</el-col>
									<el-col :span="12" class="el-headbox">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>中关村一周用电量小于1度房间数占比</span>
										</div>
										<div class="echarts_conter">
											<div id="main7" style="width: 100%;height: calc(100% - 0px);"
												v-on-echart-resize>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-col>
							<el-col style="height: 39%;" class="mb10">
								<el-row :gutter="10" class="el-rowheadbox">
									<el-col :span="12" class="el-headbox mr15">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>良乡科研楼欠费预警</span>
										</div>
										<div class="echarts_conter">
											<div style="padding: 9px 20px;">
												<el-row :gutter="0" style="height: 100%;display: flex;align-items: center;">
													<el-col :span="19" style="color: #48d081;font-size: 18px;">楼宇</el-col>
													<el-col :span="5"
														style="color: #48d081;font-size: 18px;text-align: right;">房间号</el-col>
												</el-row>
											</div>
											<div style="height: calc(100% - 40px);overflow: hidden;padding: 0 10px;">
												<vue-seamless-scroll :data="studyList" class="wx_seamless_warp"
													:class-option="classOption">
													<el-row :gutter="0" class="wx_bottom" v-for="(item, index) in studyList"
														:key="index">
														<el-col :span="19" class="overflow_hide">{{ item.name }}</el-col>
														<el-col :span="5" class="overflow_hide"
															style="text-align: right;padding-right: 20px;">{{ item.room_no
															}}</el-col>
													</el-row>
												</vue-seamless-scroll>
											</div>
										</div>
									</el-col>
									<el-col :span="12" class="el-headbox">
										<div class="headline">
											<img src="../assets/images/01.png" alt="" srcset="">
											<span>中关村学生公寓欠费预警</span>
										</div>
										<div class="echarts_conter">
											<div style="padding: 9px 20px;">
												<el-row :gutter="0" style="height: 100%;display: flex;align-items: center;">
													<el-col :span="19" style="color: #48d081;font-size: 18px;">楼宇</el-col>
													<el-col :span="5"
														style="color: #48d081;font-size: 18px;text-align: right;">房间号</el-col>
												</el-row>
											</div>
											<div style="height: calc(100% - 40px);overflow: hidden;padding: 0 10px;">
												<vue-seamless-scroll :data="apartmentList" class="wx_seamless_warp"
													:class-option="classOption">
													<el-row :gutter="0" class="wx_bottom"
														v-for="(item, index) in apartmentList" :key="index">
														<el-col :span="19" class="overflow_hide">{{ item.name }}</el-col>
														<el-col :span="5" class="overflow_hide"
															style="text-align: right;padding-right: 20px;">{{ item.room_no
															}}</el-col>
													</el-row>
												</vue-seamless-scroll>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
	name: "Home",
	components: {
		vueSeamlessScroll
	},
	data() {
		return {
			nowDate: '', //当前年月日星期
			endHeight: 0, //内容区域高度
			apartmentList: [
				{
					id: 1,
					name: '1号学生公寓',
					room: '101'
				},
				{
					id: 2,
					name: '2号学生公寓',
					room: '101'
				},
				{
					id: 3,
					name: '1号学生公寓',
					room: '102'
				},
				{
					id: 4,
					name: '2号学生公寓',
					room: '102'
				},
				{
					id: 5,
					name: '3号学生公寓',
					room: '101'
				},
			],//公寓欠费预警
			studyList: [{
				id: 1,
				name: '先进结构技术研究院',
				room: '401'
			},
			{
				id: 2,
				name: '物理实验中心',
				room: '117A'
			},
			{
				id: 3,
				name: '先进结构技术研究院',
				room: '402'
			},
			{
				id: 4,
				name: '物理实验中心',
				room: '117A'
			},],//研究楼欠费预警
			dataSetMax1: [
				{
					name: '大学生工程实践训练中心',
					value: 44,
					itemStyle: {
						color: '#db58f2'
					}
				},
				{
					name: '化学实验中心',
					value: 26,
					itemStyle: {
						color: '#e6e12d'
					}
				},
				{
					name: '理学楼B',
					value: 16,
					itemStyle: {
						color: '#009d9a'
					}
				},
				{
					name: '理学楼A',
					value: 14,
					itemStyle: {
						color: '#1e90ed'
					}
				},
			],//良乡
			dataSetMax2: [
				{
					name: '研二公寓',
					value: 3300,
					itemStyle: {
						color: '#db58f2'
					}
				},
				{
					name: '研一公寓',
					value: 2800,
					itemStyle: {
						color: '#e6e12d'
					}
				},
				{
					name: '体育馆',
					value: 2000,
					itemStyle: {
						color: '#009d9a'
					}
				},
				{
					name: '13号学生公寓',
					value: 1900,
					itemStyle: {
						color: '#1e90ed'
					}
				},
			],//中关村
			zgcData: [],//中关村用电最多对比
			lxData: [],//良乡用电最多对比
			cz_count: 0, //充值总数
			ele_count: 0,//电表总数
			zgc_count: 0,//中关村楼宇
			lx_count: 0,//良乡楼宇
			zt_count: 0,//i北理充值
			pt_count: 0,//平台充值
			time_date: [],//时间段充值
			zgcWeek: 0,//中关村周用电
			zgcMonth: 0,//中关村月用电
			lxWeek: 0,//良乡周用电
			lxMonth: 0,//良乡月用电
			zgcX: 0, //中关村小
			zgcD: 0,//中关村大
			lxX: 0,//良乡小
			lxD: 0,//良乡大
			echartsOption: null,
			screenWidth: document.body.clientWidth,
			nowClientWidth: 0
		}
	},
	computed: {
		classOption() {
			return {
				step: 0.3, // 数值越大速度滚动越快
				limitMoveNum: 10, // 开始无缝滚动的数据量 this.apartmentList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 1, // 0向下 1向上 2向左 3向右
				openWatch: true, // 开启数据实时监控刷新dom
				singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				waitTime: 0, // 单步运动停止的时间(默认值1000ms)
			};
		},
	},
	beforeMount() {
		// let initHomeHeight = document.querySelector('.home').offsetHeight
		// let initHeight = document.querySelector('.topfind').offsetHeight
		// this.endHeight = initHomeHeight - initHeight

	},
	watch: {
		echartData: {
			//deep: true,
			screenWidth(val) {
				this.screenWidth = val;
				this.echartsOption.resize()
			}
		}
	},
	mounted() {
		const self = this
		// 基于准备好的dom，初始化echarts实例
		window.onresize = () => {
			return (() => {
				window.screenWidth = document.body.clientWidth
				self.screenWidth = window.screenWidth
			})()
		}
		self.nowClientWidth = document.documentElement.clientWidth;
		// 换算方法
		// self.endHeight = self.$refs.home.offsetHeight - self.$refs.topfind.offsetHeight - 30
		self.endHeight = self.$refs.topfind.offsetHeight
		// self.getInit()
		self.getInfoData()
	},
	created() {
		//定时刷新当前时间
		let currentDate = setInterval(() => {
			let date = new Date()
			let day = date.getDay() //  获取星期
			switch (day) { //  格式化
				case 0:
					day = "星期日"
					break
				case 1:
					day = "星期一"
					break
				case 2:
					day = "星期二"
					break
				case 3:
					day = "星期三"
					break
				case 4:
					day = "星期四"
					break
				case 5:
					day = "星期五"
					break
				case 6:
					day = "星期六"
					break
			}
			let Str = date.getFullYear() + '年' +
				(date.getMonth() + 1).toString().padStart(2, "0") + '月' +
				date.getDate().toString().padStart(2, "0") + '号' + ' ' + day
			this.nowDate = Str;
		}, 1000)
		// 离开当前页面时销毁定时器
		this.$once('hook:beforeDestroy', () => {
			clearInterval(currentDate);
			currentDate = null;
		})
	},
	methods: {
		//图例字体
		fontSize(res) {
			let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			if (!clientWidth) return;
			// let fontSize = 100 * (clientWidth / 1920);
			let fontSize = 100 
			return res * fontSize;
		},
		//获取数据
		getInfoData() {
			//中间数据
			this.$axios.get('/dian').then((res) => {
				if (res.data.code == 200) {
					this.cz_count = res.data.data.cz_count
					this.ele_count = res.data.data.ele_count
					this.zgc_count = res.data.data.zgc_count
					this.lx_count = res.data.data.lx_count
					this.zt_count = res.data.data.zt_count
					this.pt_count = res.data.data.pt_count
					this.time_date = res.data.data.time_date
					this.getData1(this.time_date)
				}

			})
			//用电最多
			this.$axios.get('/most-ly').then((res) => {
				if (res.data.code == 200) {
					res.data.data.lxData.map(item => {
						item.name = item.room_name
						item.value = Number(item.week_pp)
					})
					res.data.data.zgcData.map(item => {
						item.name = item.room_name
						item.value = Number(item.week_pp)
					})
					this.lxData = res.data.data.lxData
					this.zgcData = res.data.data.zgcData
					this.getData2(this.lxData)
					this.getData3(this.lxData)
					this.getData4(this.zgcData)
					this.getData5(this.zgcData)
				}

			})
			//累计用电
			this.$axios.get('/total-dian').then((res) => {
				if (res.data.code == 200) {
					this.zgcWeek = res.data.data.zgcWeek
					this.zgcMonth = res.data.data.zgcMonth
					this.lxWeek = res.data.data.lxWeek
					this.lxMonth = res.data.data.lxMonth
				}
			})
			//本周用电小于大于
			this.$axios.get('/contrast-dian').then((res) => {
				if (res.data.code == 200) {
					this.zgcX = res.data.data.zgcX
					this.zgcD = res.data.data.zgcD
					this.lxX = res.data.data.lxX
					this.lxD = res.data.data.lxD
					this.getData6(this.lxX, this.lxD)
					this.getData7(this.zgcX, this.zgcD)
				}
			})
			//预警欠费
			this.$axios.get('/qfyj').then((res) => {
				if (res.data.code == 200) {
					this.apartmentList = res.data.data.zgcqf
					this.studyList = res.data.data.lxqf
				}
			})
			// this.getData2()
			// this.getData4()
		},
		getInit() {
			let noData = setInterval(() => {
				this.getInfoData()
			}, 600000)
			this.$once('hook:beforeDestroy', () => {
				clearInterval(noData);
			})
		},

		//获取时
		getH(time) {
			let date = new Date(time)
			let Str = date.getHours().toString().padStart(2, "0") + ':00'
			return Str
		},
		//获取年月日
		getfullDay(time) {
			let date = new Date(time)
			let Str = date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date
				.getDate().toString().padStart(2, "0")
			return Str
		},
		//获取月日
		getDay(time) {
			let date = new Date(time)
			let Str = (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date.getDate().toString().padStart(2,
				"0")
			return Str
		},
		getData1(dataInfo) {
			let that = this
			let dataValue = []
			for (var key in dataInfo) {
				dataValue.push(dataInfo[key])
			}
			if (document.getElementById('main1') == null) {
				return
			}
			this.$echarts.dispose(document.getElementById('main1'))
			let myChart = this.$echarts.init(document.getElementById('main1'));
			let option = {
				grid: {
					left: '3%',
					bottom: '4%',
					top: '10%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					borderColor: '#0372bb',
					backgroundColor: '#011f43',
					textStyle: {
						color: '#fff'
					}
				},
				xAxis: {
					type: 'category',
					data: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
					axisTick: {
						show: true, // 刻度线
					},
					axisLine: {//x轴线的颜色以及宽度
						show: true,
						lineStyle: {
							color: "#0372bb",
							width: 1,
							type: "solid"
						},
					},
					axisLabel: {
						show: true,
						interval: 0,
						fontSize: that.fontSize(0.14)
						// rotate: 40,
					},
					splitLine: {
						show: false
					}
				},
				yAxis: {
					type: 'value',
					axisTick: {
						show: true // 刻度线
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: "#0372bb",
							width: 1,
							type: "solid"
						},
					},
					axisLabel: {
						fontSize: that.fontSize(0.14)
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "#353b5a",//线条颜色
							type: "sold"//线条样式，默认是实现，dashed是虚线
						}
					}
				},
				series: [
					{
						data: dataValue,
						type: 'line',
						smooth: true,
						symbol: "none",
						// barWidth: 5,
						// barMaxWidth: 10,
						// barMinWidth: 5,
						itemStyle: {
							borderWidth: 1,
							color: '#13f024',
						},
					}
				]
			}
			myChart.setOption(option);
		},
		getData2(dataInfo) {
			let that = this
			if (document.getElementById('main2') == null) {
				return
			}
			this.$echarts.dispose(document.getElementById('main2'))
			let myChart = this.$echarts.init(document.getElementById('main2'));
			let hoveredIndex = '';
			let option = that.getPie3D(
				dataInfo,
				0.6
			);
			myChart.setOption(option);
			// 监听 mouseover，近似实现高亮（放大）效果
			myChart.on('mouseover', function (params) {
				// 准备重新渲染扇形所需的参数
				let isSelected;
				let isHovered;
				let startRatio;
				let endRatio;
				let k;
				let i;

				// 如果触发 mouseover 的扇形当前已高亮，则不做操作
				if (hoveredIndex === params.seriesIndex) {
					return;

					// 否则进行高亮及必要的取消高亮操作
				} else {
					// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
					if (hoveredIndex !== '') {
						// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
						isSelected = option.series[hoveredIndex].pieStatus.selected;
						isHovered = false;
						startRatio = option.series[hoveredIndex].pieData.startRatio;
						endRatio = option.series[hoveredIndex].pieData.endRatio;
						k = option.series[hoveredIndex].pieStatus.k;
						i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 1 : 1;
						// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
						option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
							startRatio,
							endRatio,
							isSelected,
							isHovered,
							k,
							i
						);
						option.series[hoveredIndex].pieStatus.hovered = isHovered;

						// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
						hoveredIndex = '';
					}

					// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
					if (params.seriesName !== 'mouseoutSeries') {
						let sumValueEnd = 0
						dataInfo.map(item => {
							sumValueEnd += item.value
						})
						// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
						isSelected = option.series[params.seriesIndex].pieStatus.selected;
						isHovered = true;
						startRatio = option.series[params.seriesIndex].pieData.startRatio;
						endRatio = option.series[params.seriesIndex].pieData.endRatio;
						k = option.series[params.seriesIndex].pieStatus.k;

						// 对当前点击的扇形，执行高亮操作（对 option 更新）
						option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(
							startRatio,
							endRatio,
							isSelected,
							isHovered,
							k,
							// option.series[params.seriesIndex].pieData.value + 5
							parseFloat((option.series[params.seriesIndex].pieData.value) / sumValueEnd).toFixed(2) * 100
						);
						option.series[params.seriesIndex].pieStatus.hovered = isHovered;

						// 记录上次高亮的扇形对应的系列号 seriesIndex
						hoveredIndex = params.seriesIndex;
					}

					// 使用更新后的 option，渲染图表
					myChart.setOption(option);
				}
			});

			// 修正取消高亮失败的 bug
			myChart.on('globalout', function () {
				if (hoveredIndex !== '') {
					// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
					let isSelected = option.series[hoveredIndex].pieStatus.selected;
					let isHovered = false;
					let k = option.series[hoveredIndex].pieStatus.k;
					let startRatio = option.series[hoveredIndex].pieData.startRatio;
					let endRatio = option.series[hoveredIndex].pieData.endRatio;
					// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
					let i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 1 : 1;
					option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
						startRatio,
						endRatio,
						isSelected,
						isHovered,
						k,
						i
					);
					option.series[hoveredIndex].pieStatus.hovered = isHovered;

					// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
					hoveredIndex = '';
				}

				// 使用更新后的 option，渲染图表
				myChart.setOption(option);
			});

		},
		getData3(dataInfo) {
			let that = this
			let dataName = []
			let dataValue = []
			dataInfo.map(item => {
				dataName.push(item.room_name)
				dataValue.push(item.week_pp)
			})
			if (document.getElementById('main3') == null) {
				return
			}
			this.$echarts.dispose(document.getElementById('main3'))
			let myChart = this.$echarts.init(document.getElementById('main3'));
			// let colorList = ['#39B3FF', '#47E0E0', '#7891D9', '#83D978', '#C7A530', '#FF8439'];
			let attName = dataName;
			let option = {
				grid: {
					left: '3%',
					bottom: '4%',
					top: '3%',
					right: '3%',
					containLabel: true
				},
				tooltip: {
					show: true,
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					formatter: function (params) {
						return params[0].name + '<br/>' +
							"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
							// params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
							params[0].value + ' kwh'
					},
					borderColor: '#0372bb',
					backgroundColor: '#011f43',
					textStyle: {
						color: '#fff'
					}
				},
				// backgroundColor: 'rgb(20,28,52)',
				xAxis: {
					show: false,
					type: 'value'
				},
				yAxis: [{
					type: 'category',
					inverse: true,
					axisLabel: {
						show: true,
						color: '#fff',
						fontSize: that.fontSize(0.14),
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					data: attName
				}, {
					type: 'category',
					inverse: true,
					axisTick: 'none',
					axisLine: 'none',
					show: true,
					axisLabel: {
						color: '#ffffff',
						fontSize: that.fontSize(0.14),
						formatter: function (value) {
							return value + ' kwh';
						},
					},
					data: dataValue
				},

				],
				series: [{
					// name: '完成率',
					type: 'bar',
					zlevel: 1,
					itemStyle: {
						borderRadius: 10,
						// color: (params) => {
						// 	return colorList[params.dataIndex]
						// }
						color: {
							type: 'bar',
							colorStops: [{
								offset: 0,
								color: '#22fde2' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#0f88ea' // 100% 处的颜色
							}],
							globalCoord: false, // 缺省为 false

						}
					},
					// label: {
					// 	normal: {
					// 		show: true,
					// 		position: [0, that.nowSize(200)+'%'],
					// 		color: '#ffffff',
					// 		fontSize: that.fontSize(0.14),
					// 		// textStyle:{
					// 		// 	padding:6
					// 		// },
					// 		formatter: function (data) {
					// 			return attName[data.dataIndex]

					// 		},
					// 	},

					// },
					barWidth: 10,
					data: dataValue
				},
					// {
					// 	name: '背景',
					// 	type: 'bar',
					// 	barWidth: 10,
					// 	barGap: '-100%',
					// 	data: [20000, 20000, 20000, 20000,20000],
					// 	itemStyle: {
					// 		normal: {
					// 			color: 'rgba(0,0,0,0)',
					// 			barBorderRadius: 10,
					// 			borderWidth: 1,
					// 			borderColor: '#087289',
					// 		}
					// 	},
					// },

				]
			}
			myChart.setOption(option);
		},
		getData4(dataInfo) {
			let that = this
			if (document.getElementById('main4') == null) {
				return
			}
			this.$echarts.dispose(document.getElementById('main4'))
			let myChart = this.$echarts.init(document.getElementById('main4'));
			let hoveredIndex = '';
			let option = that.getPie3D(
				dataInfo,
				0.6
			);
			myChart.setOption(option);
			// 监听 mouseover，近似实现高亮（放大）效果
			myChart.on('mouseover', function (params) {
				// 准备重新渲染扇形所需的参数
				let isSelected;
				let isHovered;
				let startRatio;
				let endRatio;
				let k;
				let i;

				// 如果触发 mouseover 的扇形当前已高亮，则不做操作
				if (hoveredIndex === params.seriesIndex) {
					return;

					// 否则进行高亮及必要的取消高亮操作
				} else {
					// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
					if (hoveredIndex !== '') {
						// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
						isSelected = option.series[hoveredIndex].pieStatus.selected;
						isHovered = false;
						startRatio = option.series[hoveredIndex].pieData.startRatio;
						endRatio = option.series[hoveredIndex].pieData.endRatio;
						k = option.series[hoveredIndex].pieStatus.k;
						i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 1 : 1;
						// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
						option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
							startRatio,
							endRatio,
							isSelected,
							isHovered,
							k,
							i
						);
						option.series[hoveredIndex].pieStatus.hovered = isHovered;

						// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
						hoveredIndex = '';
					}

					// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
					if (params.seriesName !== 'mouseoutSeries') {
						// console.log(dataInfo,'数据');
						let sumValueEnd = 0
						dataInfo.map(item => {
							sumValueEnd += item.value
						})
						// console.log(sumValueEnd,'总数',parseFloat((option.series[params.seriesIndex].pieData.value)/sumValueEnd).toFixed(2)*100);
						// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
						isSelected = option.series[params.seriesIndex].pieStatus.selected;
						isHovered = true;
						startRatio = option.series[params.seriesIndex].pieData.startRatio;
						endRatio = option.series[params.seriesIndex].pieData.endRatio;
						k = option.series[params.seriesIndex].pieStatus.k;

						// 对当前点击的扇形，执行高亮操作（对 option 更新）
						option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(
							startRatio,
							endRatio,
							isSelected,
							isHovered,
							k,
							// option.series[params.seriesIndex].pieData.value + 5,
							parseFloat((option.series[params.seriesIndex].pieData.value) / sumValueEnd).toFixed(2) * 100
						);
						option.series[params.seriesIndex].pieStatus.hovered = isHovered;

						// 记录上次高亮的扇形对应的系列号 seriesIndex
						hoveredIndex = params.seriesIndex;
					}

					// 使用更新后的 option，渲染图表
					myChart.setOption(option);
				}
			});

			// 修正取消高亮失败的 bug
			myChart.on('globalout', function () {
				if (hoveredIndex !== '') {
					// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
					let isSelected = option.series[hoveredIndex].pieStatus.selected;
					let isHovered = false;
					let k = option.series[hoveredIndex].pieStatus.k;
					let startRatio = option.series[hoveredIndex].pieData.startRatio;
					let endRatio = option.series[hoveredIndex].pieData.endRatio;
					// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
					let i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 1 : 1;

					option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
						startRatio,
						endRatio,
						isSelected,
						isHovered,
						k,
						i
					);
					option.series[hoveredIndex].pieStatus.hovered = isHovered;

					// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
					hoveredIndex = '';
				}

				// 使用更新后的 option，渲染图表
				myChart.setOption(option);
			});

		},
		getData5(dataInfo) {
			let that = this
			let dataName = []
			let dataValue = []
			dataInfo.map(item => {
				dataName.push(item.room_name)
				dataValue.push(item.week_pp)
			})
			if (document.getElementById('main5') == null) {
				return
			}
			this.$echarts.dispose(document.getElementById('main5'))
			let myChart = this.$echarts.init(document.getElementById('main5'));
			// let colorList = ['#39B3FF', '#47E0E0', '#7891D9', '#83D978', '#C7A530', '#FF8439'];
			let attName = dataName;
			let option = {
				grid: {
					left: '3%',
					bottom: '4%',
					right: '3%',
					top: '3%',
					containLabel: true
				},
				tooltip: {
					show: true,
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					formatter: function (params) {
						return params[0].name + '<br/>' +
							"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
							// params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
							params[0].value + ' kwh'
					},
					borderColor: '#0372bb',
					backgroundColor: '#011f43',
					textStyle: {
						color: '#fff'
					}
				},
				// backgroundColor: 'rgb(20,28,52)',
				xAxis: {
					show: false,
					type: 'value'
				},
				yAxis: [{
					type: 'category',
					inverse: true,
					axisLabel: {
						show: true,
						color: '#fff',
						fontSize: that.fontSize(0.14),
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					data: attName
				}, {
					type: 'category',
					inverse: true,
					axisTick: 'none',
					axisLine: 'none',
					show: true,
					axisLabel: {
						color: '#ffffff',
						fontSize: that.fontSize(0.14),
						formatter: function (value) {
							return value + ' kwh';
						},
					},
					data: dataValue
				},

				],
				series: [{
					// name: '完成率',
					type: 'bar',
					zlevel: 1,
					itemStyle: {
						borderRadius: 10,
						// color: (params) => {
						// 	return colorList[params.dataIndex]
						// }
						color: {
							type: 'bar',
							colorStops: [{
								offset: 0,
								color: '#22fde2' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#0f88ea' // 100% 处的颜色
							}],
							globalCoord: false, // 缺省为 false

						}
					},
					// label: {
					// 	normal: {
					// 		show: true,
					// 		position: [0, that.nowSize(200)+'%'],
					// 		color: '#ffffff',
					// 		fontSize: that.nowSize(14),
					// 		// textStyle:{
					// 		// 	padding:6
					// 		// },
					// 		formatter: function (data) {
					// 			return attName[data.dataIndex]

					// 		},
					// 	},

					// },
					barWidth: 10,
					data: dataValue
				},
					// {
					// 	name: '背景',
					// 	type: 'bar',
					// 	barWidth: 10,
					// 	barGap: '-100%',
					// 	data: [20000, 20000, 20000, 20000],
					// 	itemStyle: {
					// 		normal: {
					// 			color: 'rgba(0,0,0,0)',
					// 			barBorderRadius: 10,
					// 			borderWidth: 1,
					// 			borderColor: '#087289',
					// 		}
					// 	},
					// },

				]
			}
			myChart.setOption(option);
		},
		getData6(lxX, lxD) {
			let that = this
			let num = lxD + lxX
			let lxXValue = Math.floor(parseFloat(lxX / num).toFixed(2) * 100)
			let lxDValue = Math.floor(parseFloat(lxD / num).toFixed(2) * 100)
			if (document.getElementById('main6') == null) {
				return
			}
			this.$echarts.dispose(document.getElementById('main6'))
			let myChart = this.$echarts.init(document.getElementById('main6'));
			let option = {
				title: {
					show: false,
					text: "物理实验中心",
					x: 'center',
					y: '88%',
					textStyle: {
						color: "#fff",
						fontSize: that.fontSize(0.16),
						fontWeight: 'normal'
					},
				},
				// tooltip: {
				// 	trigger: 'item',
				// 	formatter: "{a} <br/>{b} : {c} ({d}%)"
				// },
				calculable: true,
				series: [
					{
						type: 'pie',
						radius: ['40%', '65%'],
						center: ['50%', '50%'],
						data: [{
							value: lxXValue,
							// name: '小于一度的房间',
							itemStyle: {
								color: '#fff31c'
							},
							label: {
								fontSize: that.fontSize(0.14),
								color: "#fff",
								formatter: function (params) {
									return '{abg|}  小于一度的房间 ' + params.value + '%'
								},
								rich: {
									abg: {
										backgroundColor: '#fff31c',
										width: 10,
										align: 'left',
										height: 10,
										borderRadius: 4
									},
								}
							},
							// labelLine: {
							// 	length: 10,
							// 	length2: 6,
							// 	// minTurnAngle:90
							// },

							// emphasis: {
							// 	disable: false,  //是否关闭扇区高亮效果
							// 	scale: true,    //扇区是否缩放
							// 	scaleSize: 10,    //放大的尺寸
							// }
						},
						{
							value: lxDValue,
							itemStyle: {
								color: "transparent",
								opacity: 0
							},
							label: {
								show: false
							}
						},

						]
					},
					{
						type: 'pie',
						radius: ['45%', '55%'],
						center: ['50%', '50%'],
						data: [{
							value: lxXValue,
							// name: '大于一度的房间',
							itemStyle: {
								color: "transparent",
								opacity: 0
							},
							label: {
								show: false
							}
						},
						{
							value: lxDValue,
							// name: '大于一度的房间',
							itemStyle: {
								color: '#47e189'
							},
							label: {
								fontSize: that.fontSize(0.14),
								color: "#fff",
								formatter: function (params) {
									return '{abg|}  大于一度的房间 ' + params.value + '%'
								},
								rich: {
									abg: {
										backgroundColor: '#47e189',
										width: 10,
										align: 'left',
										height: 10,
										borderRadius: 4
									},
								}
							},
							// labelLine: {
							// 	length: 12,
							// 	length2: 6,
							// 	// minTurnAngle:90
							// },
						}
						]
					}
				]
			}
			myChart.setOption(option);
		},
		getData7(zgcX, zgcD) {
			let that = this
			// let nowClientWidth = document.documentElement.clientWidth;
			// // 换算方法
			// let nowSize = function (val, initWidth = 1920) {
			// 	return val * (nowClientWidth / initWidth);
			// };
			let num = zgcD + zgcX
			let zgcXValue = Math.floor(parseFloat(zgcX / num).toFixed(2) * 100)
			let zgcDValue = Math.floor(parseFloat(zgcD / num).toFixed(2) * 100)
			if (document.getElementById('main7') == null) {
				return
			}
			this.$echarts.dispose(document.getElementById('main7'))
			let myChart = this.$echarts.init(document.getElementById('main7'));
			let option = {
				title: {
					show: false,
					text: "5号学生公寓",
					x: 'center',
					y: '88%',
					textStyle: {
						color: "#fff",
						fontSize: that.fontSize(0.16),
						fontWeight: 'normal'
					},
				},
				// tooltip: {
				// 	trigger: 'item',
				// 	formatter: "{a} <br/>{b} : {c} ({d}%)"
				// },
				calculable: true,
				series: [
					{
						type: 'pie',
						radius: ['40%', '65%'],
						center: ['50%', '50%'],
						data: [{
							value: zgcXValue,
							// name: '小于一度的房间',
							itemStyle: {
								color: '#fff31c'
							},
							label: {
								fontSize: that.fontSize(0.14),
								color: "#fff",
								formatter: function (params) {
									return '{abg|}  小于一度的房间 ' + params.value + '%'
								},
								rich: {
									abg: {
										backgroundColor: '#fff31c',
										width: 10,
										align: 'left',
										height: 10,
										borderRadius: 4
									},
								}
							},
							// labelLine: {
							// 	length: 10,
							// 	length2: 6,
							// 	// minTurnAngle:90
							// },

							// emphasis: {
							// 	disable: false,  //是否关闭扇区高亮效果
							// 	scale: true,    //扇区是否缩放
							// 	scaleSize: 10,    //放大的尺寸
							// }
						},
						{
							value: zgcDValue,
							name: '',
							itemStyle: {
								color: "transparent",
								opacity: 0
							},
							label: {
								show: false
							}
						},

						]
					},
					{
						type: 'pie',
						radius: ['45%', '55%'],
						center: ['50%', '50%'],
						data: [{
							value: zgcXValue,
							// name: '大于一度的房间',
							itemStyle: {
								color: "transparent",
								opacity: 0
							},
							label: {
								show: false
							}
						},
						{
							value: zgcDValue,
							// name: '大于一度的房间',
							itemStyle: {
								color: '#cd50f2'
							},
							label: {
								fontSize: that.fontSize(0.14),
								color: "#fff",
								formatter: function (params) {
									return '{abg|}  大于一度的房间 ' + params.value + '%'
								},
								rich: {
									abg: {
										backgroundColor: '#cd50f2',
										width: 10,
										align: 'left',
										height: 10,
										borderRadius: 4
									},
								}
							},
							// labelLine: {
							// 	length: 12,
							// 	length2: 6,
							// 	// minTurnAngle:90
							// },
						}
						]
					}
				]
			}
			myChart.setOption(option);
		},
		nowSize(val) {
			return val * (this.nowClientWidth / this.screenWidth);
		},
		getPie3D(pieData, internalDiameterRatio) {
			let that = this
			const series = [];
			// 总和
			let sumValue = 0;
			let startValue = 0;
			let endValue = 0;
			const legendData = [];
			const k =
				typeof internalDiameterRatio !== 'undefined'
					? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
					: 1 / 3;

			// 为每一个饼图数据，生成一个 series-surface 配置
			for (let i = 0; i < pieData.length; i += 1) {
				sumValue += pieData[i].value;

				const seriesItem = {
					name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
					type: 'surface',
					parametric: true,
					wireframe: {
						show: false,
					},
					pieData: pieData[i],
					pieStatus: {
						selected: false,
						hovered: false,
						k,
					},
				};

				if (typeof pieData[i].itemStyle !== 'undefined') {
					const { itemStyle } = pieData[i];

					// eslint-disable-next-line no-unused-expressions
					typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
					// eslint-disable-next-line no-unused-expressions
					typeof pieData[i].itemStyle.opacity !== 'undefined'
						? (itemStyle.opacity = pieData[i].itemStyle.opacity)
						: null;

					seriesItem.itemStyle = itemStyle;
				}
				series.push(seriesItem);
			}
			// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
			// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
			for (let i = 0; i < series.length; i += 1) {
				endValue = startValue + series[i].pieData.value;

				series[i].pieData.startRatio = startValue / sumValue;
				series[i].pieData.endRatio = endValue / sumValue;
				series[i].parametricEquation = that.getParametricEquation(
					series[i].pieData.startRatio,
					series[i].pieData.endRatio,
					false,
					false,
					k,
					// 我这里做了一个处理，使除了第一个之外的值都是10
					series[i].pieData.value === series[0].pieData.value ? 1 : 1,
				);

				startValue = endValue;

				legendData.push(series[i].name);
			}

			// 准备待返回的配置项，把准备好的 legendData、series 传入。
			const option = {
				// animation: false,
				legend: {
					icon: 'circle',
					data: legendData,
					top: '3%',
					width: 50,
					itemGap: that.fontSize(0.12),
					align: 'right',
					right: 40,
					formatter: function (params) {
						var res = '';
						for (var i = 0; i < pieData.length; i++) {
							if (pieData[i].name == params) {
								res = pieData[i].name + '  ' + parseInt(that.fomatFloat(pieData[i].value / sumValue, 2) * 100) + '%';
							}
						}
						if (!res) {
							res = params;
						}
						return res;
					},
					textStyle: {
						color: '#fff',
						fontSize: that.fontSize(0.14)
					},
				},
				tooltip: {
					show: true,
					formatter: (params) => {
						if (params.seriesName !== 'mouseoutSeries') {
							return `${params.seriesName
								}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
								};"></span>${option.series[params.seriesIndex].pieData.value}`;
						}
						return '';
					},
					borderColor: '#0372bb',
					backgroundColor: '#011f43',
					textStyle: {
						color: '#fff'
					}
				},
				xAxis3D: {
					min: -1,
					max: 1,
				},
				yAxis3D: {
					min: -1,
					max: 1,
				},
				zAxis3D: {
					min: -1,
					max: 1,
				},
				grid3D: {
					show: false,
					boxHeight: 20,
					// top: '20%',
					left: '-20%',
					viewControl: {
						// 3d效果可以放大、旋转等，请自己去查看官方配置
						alpha: 30,
						// beta: 30,
						rotateSensitivity: 1,
						zoomSensitivity: 0,
						panSensitivity: 0,
						autoRotate: true,
						distance: 150,
					},
					// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
					postEffect: {
						// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
						enable: false,
						bloom: {
							enable: true,
							bloomIntensity: 0.1,
						},
						SSAO: {
							enable: true,
							quality: 'medium',
							radius: 2,
						},
						// temporalSuperSampling: {
						//   enable: true,
						// },
					},
				},
				series,
			};
			return option;
		},
		fomatFloat(num, n) {
			var f = parseFloat(num);
			if (isNaN(f)) {
				return false;
			}
			f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
			var s = f.toString();
			var rs = s.indexOf('.');
			//判定如果是整数，增加小数点再补0
			if (rs < 0) {
				rs = s.length;
				s += '.';
			}
			while (s.length <= rs + n) {
				s += '0';
			}
			return s;
		},
		getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
			// 计算
			const midRatio = (startRatio + endRatio) / 2;

			const startRadian = startRatio * Math.PI * 2;
			const endRadian = endRatio * Math.PI * 2;
			const midRadian = midRatio * Math.PI * 2;

			// 如果只有一个扇形，则不实现选中效果。
			if (startRatio === 0 && endRatio === 1) {
				// eslint-disable-next-line no-param-reassign
				isSelected = false;
			}

			// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
			// eslint-disable-next-line no-param-reassign
			k = typeof k !== 'undefined' ? k : 1 / 3;

			// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
			const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
			const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

			// 计算高亮效果的放大比例（未高亮，则比例为 1）
			const hoverRate = isHovered ? 1.05 : 1;

			// 返回曲面参数方程
			return {
				u: {
					min: -Math.PI,
					max: Math.PI * 3,
					step: Math.PI / 32,
				},

				v: {
					min: 0,
					max: Math.PI * 2,
					step: Math.PI / 20,
				},

				x(u, v) {
					if (u < startRadian) {
						return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
					}
					if (u > endRadian) {
						return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
					}
					return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
				},

				y(u, v) {
					if (u < startRadian) {
						return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
					}
					if (u > endRadian) {
						return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
					}
					return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
				},

				z(u, v) {
					if (u < -Math.PI * 0.5) {
						return Math.sin(u);
					}
					if (u > Math.PI * 2.5) {
						return Math.sin(u) * h * 0.1;
					}
					// 当前图形的高度是Z根据h（每个value的值决定的）
					return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
				},
			};
		}

	},
};
</script>
<style scoped>
.home {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 30px;
	/* padding-bottom: 30px; */
	color: #fff;
	/* background-color: #010207; */
	background-color: #011f43;
}

.title_name_box {
	padding-top: 10px;
}

.title_name {
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url('../assets/images/05.png')no-repeat;
	background-size: 100% 100%;
}

.title_name span {
	display: flex;
	padding: 4px;
	text-align: center;
	font-size: 28px;
	letter-spacing: 2px;
}

.cover_name {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.item_data {
	background: url('../assets/images/06.png')no-repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 209px;
	height: 198px;
	padding: 10px;
	position: absolute;
	animation: animationOut 5s linear infinite;
}

@keyframes animationOut {
	0% {
		transform: translateY(0%);
	}

	50% {
		transform: translateY(20%);
	}

	100% {
		transform: translateY(0%);
	}
}

.item_data_lefts {
	top: 20%;
	left: 14%;
}

.item_data_leftx {
	bottom: 26%;
	left: 4%;
}

.item_data_rights {
	top: 20%;
	right: 14%;
}

.item_data_rightx {
	bottom: 26%;
	right: 4%;
}

.span_deta {
	font-size: 18px;
	font-weight: bold;
}

.span_name_data {
	font-size: 14px;
	margin-bottom: 30px;
}

.left_name {
	background-color: #021330;
	height: 100%;
	position: absolute;
	width: 100%;
	top: -8px;
	padding: 8px 0 0 0;
}

.left_name_block {
	padding: 10px;
	height: 99%;
}

.right_name {
	background-color: #021330;
	height: 100%;
	position: absolute;
	width: 100%;
	top: -8px;
	padding: 8px 0 0 0;
}

.el-rowheadbox {
	display: flex;
	height: 100%;
}

.el-headbox {
	background-color: #011f43;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

.headline {
	background: url('../assets/images/08.png')no-repeat;
	background-color: #011e42bb;
	background-position: 0 100%;
	background-size: 50% 10%;
	display: flex;
	align-items: center;
}

.headline img {
	padding: 4px;
	width: 24px;
	height: 24px;
}

.headline span {
	margin-left: 10px;
	font-size: 16px;
	letter-spacing: 2px;
}

.mr10 {
	margin-right: 10px;
}

.mr15 {
	margin-right: 15px;
}

.mb10 {
	margin-bottom: 10px;
}

.mb15 {
	margin-bottom: 15px;
}

/* 内容 */
.isecharts_conter {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.echarts_conter {
	flex: 1;
	overflow: hidden;
	/* display: flex; */
}

/* .isecharts_conter>div{
	flex: 1;
} */
.isecharts_conter_left {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.isecharts_conter_right {
	flex: 1;
	display: flex;
	font-size: 16px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.isecharts_conter_left>div {
	background: url('../assets/images/02.png')no-repeat;
	background-size: 96% 100%;
	width: 178px;
	height: 125px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	/* padding: 30px 0; */
}

.wx_seamless_warp {
	height: 100%;
	width: 100%;
}

.wx_bottom {
	/* height: 28px;
	line-height: 28px; */
	/* margin-left:10px; */
	margin: 0 10px;
	padding: 6px 0;
	border-bottom: 1px dashed #44566f;
}

.overflow_hide {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
}

.isecharts_conter1 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100% - 24px);
}

.isecharts_conter1>div {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* #main2{
	background: url('../assets/images/06.png')no-repeat;
	background-size: 40% 80%;
	background-position: 16% 140%;
} */
</style>
